<template>
  <!-- 规则定义子页面 基本信息-->

  <div>
    <el-form
      :model="addRuleBasic"
      ref="addRuleBasic"
      label-width="100px"
      label-position="left"
      size="mini"
      :rules="addRuleBasicRules"
    >
      <el-row>
        <el-col :span="24">
          <h3 style="line-height: 40px; font-weight: bolder; font-size: 13px">
            规则基本信息
          </h3>
        </el-col>
      </el-row>
        <el-row>
        <el-col :span="11">
          <el-form-item label="规则编码: " label-width="100px" prop="ruleCode">
            <el-input
              readonly
              v-model="addRuleBasic.ruleCode"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2"> </el-col>
        <el-col :span="11">
          <el-form-item label="规则名称: " label-width="100px" prop="ruleName">
            <el-input
              :readonly="operateType == '3'"
              v-model="addRuleBasic.ruleName"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="11">
          <el-form-item label="所属场景:">
            <el-select
              clearable
              :disabled="
                operateType == '3' || (sceneDis != '0' && operateType == '2')
              "
              v-model="addRuleBasic.sceneCode"
              placeholder="请选择所属场景"
              style="width: 100%"
            >
              <el-option
                v-for="item in sceneCodeList"
                :key="item.sceneCode"
                :label="item.sceneName"
                :value="item.sceneCode"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2"></el-col>
        <el-col :span="11">
          <el-form-item label="规则类型:" prop="ruleType">
            <el-select
              :disabled="operateType && operateType != '1'"
              v-model="addRuleBasic.ruleType"
              placeholder="请选择规则类型"
              style="width: 100%"
              @change="ruleTypeChange"
            >
              <el-option
                v-for="item in ruleTypeList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        </el-row>
        <el-row>
        <el-col :span="24">
          <el-form-item label="规则描述:" prop="descn">
            <el-input
              :readonly="operateType == '3'"
              v-model="addRuleBasic.descn"
              type="textarea"
              maxlength="100"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <h3 style="line-height: 40px; font-weight: bolder; font-size: 13px">
            分摊方法
          </h3>
        </el-col>
      </el-row>
      <el-radio-group
        v-model="addRuleBasic.driverType"
        @change="radioChange"
        :disabled="operateType != '1'"
      >
        <el-row style="margin-bottom: 10px">
          <el-col :span="6">
            <el-radio label="D" :disabled="operateType == '3'"
              ><span style="font-size: 12px">动态比例</span></el-radio
            >
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="16">
            <p>
              此方法支持将待摊的原始费用通过动态的计算数据的比例分摊到目标责任中心
            </p>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-radio label="S" :disabled="operateType == '3'"
              ><span style="font-size: 12px">静态比例表</span></el-radio
            >
          </el-col>

          <el-col :span="2"></el-col>
          <el-col :span="16">
            <p style="line-height: 20px">
              此方法支持将待摊的原始费用通过已设置好的静态比例（存放于动因静态表中）分摊到目标责任中心。
            </p>
          </el-col>
        </el-row>
      </el-radio-group>
    </el-form>
  </div>
</template>
<script>
//
import { ruleDefinition } from "@/api/index";

export default {
  name: "basicMsg",
  components: {
  },
  props: {
    ruleCode: {
      type: String,
      default: "",
    },
    operateType: {
      type: String,
      default: "1",
    },
  },
  data() {
    return {
      sceneCodeList: [],
      ruleTypeList: [
        {
          value: "0",
          label: "机构层级",
        },
        {
          value: "1",
          label: "账户层级",
        },
      ],
      sceneDis: "",
      addRuleBasic: {
        ruleCode: "",
        ruleName: "",
        sceneCode: "",
        ruleType: "0",
        driverType: "S",
        descn: "",
      },
      addRuleBasicRules: {
        ruleCode: [
          { required: true, message: "请输入规则编码", trigger: "blur" },
        ],
        ruleName: [
          { required: true, message: "请输入规则名称", trigger: "blur" },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9（）()\[\]【】{}]{1,40}$/,
            message: "只能输入1-40位的汉字、字母、数字或括号",
            trigger: "blur",
          },
        ],
        ruleType: [
          { required: true, message: "请选择规则类型", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    // this.getRuleBaseToInit();
    // this.getScenceList();
  },

  methods: {
    ruleTypeChange(val) {
      this.bus.$emit("ruleTypeChange", this.addRuleBasic);
    },
    radioChange(val) {
      this.bus.$emit("radioChange", this.addRuleBasic);
    },
    // 清除初始数据
    clearMsg() {
      this.$nextTick(() => {
        this.$refs.addRuleBasic.clearValidate();
        for (let k in this.addRuleBasic) {
          this.addRuleBasic[k] = "";
        }
      });
      this.getRuleBaseToInit();
    },
    // 获取场景列表
    getScenceList() {
      ruleDefinition
        .ruleSceneComboAll()
        .then((res) => {
          if (res.code == 200) {
            this.sceneCodeList = res.datas;
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取基础信息的回显数据
    getRuleBaseToInit() {
      this.getScenceList();
      let params = {
        ruleCode: this.ruleCode,
        operateType: this.operateType,
      };
      ruleDefinition
        .ruleBaseToInit(params)
        .then((res) => {
          if (res.code == 200) {
            let basicMsg = res.data;
            this.addRuleBasic.ruleCode = basicMsg.entity.ruleCode;
            this.addRuleBasic.ruleName = basicMsg.entity.ruleName
              ? basicMsg.entity.ruleName
              : "";
            this.addRuleBasic.sceneCode = basicMsg.entity.sceneCode;
            this.addRuleBasic.ruleType = basicMsg.entity.ruleType;
            this.addRuleBasic.driverType = basicMsg.entity.driverType;
            this.addRuleBasic.descn = basicMsg.entity.descn;
            this.sceneDis = basicMsg.sceneDis;
            // 编辑且sceneDis不为0场景类型不能修改
            if (
              this.addRuleBasic.ruleType != "0" &&
              this.addRuleBasic.ruleType != "1"
            ) {
              this.addRuleBasic.ruleType = "0";
            }
            if (
              this.addRuleBasic.driverType != "D" &&
              this.addRuleBasic.driverType != "S"
            ) {
              this.addRuleBasic.driverType = "D";
            }
            this.bus.$emit("ruleTypeChangeInit", this.addRuleBasic);
            this.bus.$emit("radioChangeInit", this.addRuleBasic);
            console.log(this.basicMsg, "this.basicMsg");
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<style lang="scss" scoped></style>